{% extends "ceudp/base.html" %}
{% load staticfiles %}

{% block customize-style %}
    <style type="text/css">
        div.dataTables_filter {
            text-align: left;
        }
    </style>
{% endblock %}

{% block customize-script %}
<script>
    leaf_active("audit_logger"); // 激活左侧菜单栏图标效果
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });

    var auditlog_table = null;
    $(function(){
        auditlog_table = $('#auditlog_table').DataTable({
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "paginate": {
                    "first": "第一页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "最后一页",
                },
            },
            "info": true,
            "paging": true,
            // "searching": false,
            "autoWidth": false,
            "processing": true,
            "bLengthChange": false, // 是否启动可以改变单页数量
            "iDisplayLength" : 20, // 设置单页显示数量
            "order": [[ 0, "asc" ]], // 默认 按第4列（从0开始）倒序排列
            "ajax": {
                "url": "{% url 'security_api:auditlog-list' %}",
                "method": "GET",
                "timeout": 5000,
                "dataSrc": function(response){ return response },
                "error": function(response){
                    sweetAlert("错误", response.responseText, "error");
                },
            },
            "columns": [
                { 
                    "data": "id", "title": "编号", "width": "30px",
                },
                { 
                    "data": "user", "title": "用户", "width": "30px",
                    "render": function(user){
                        return user.username;
                    },
                },
                { 
                    "data": "content_type", "title": "对象", "width": "30px",
                    "render": function(content_type){
                        var model = "";
                        switch(content_type.model)
                        {
                            case "user":
                                model = "用户";
                                break;
                            case "group":
                                model = "用户组";
                                break;
                            default:
                                model = "未知";
                        }

                        return model;
                    },
                },
                { 
                    "data": "action", "title": "动作", "width": "50px",
                    "render": function(action){
                        var action_str = "";
                        switch(action)
                        {
                            case "LOGIN":
                                action_str = "登陆";
                                break;
                            case "API_LOGIN":
                                action_str = "接口登陆";
                                break;
                            case "CREATE":
                                action_str = "创建";
                                break;
                            case "UPDATE":
                                action_str = "修改";
                                break;
                            default:
                                action_str = "未知";
                        }

                        return action_str;
                    },
                },
                { 
                    "data": "created", "title": "时间",
                    "render": function(modified){
                        var date = new Date(modified);
                        return date.toLocaleDateString() + " " + date.toLocaleTimeString();
                    },
                },
                { 
                    "data": "content", "title": "内容",
                },
            ],
            "dom": "<'#top-search.pull-left' f> <'#top-toolbar'>rtip",

        });

        // 顶部按钮
        var top_toolbar = "<div>" +
            "<div class='btn-group pull-right'>" +
                // "<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#group-create-modal'>" + 
                //     "<i class='fa fa-group'></i>" +
                // "</button>" +
            "</div>" +
        "</div>";
        $("#top-toolbar").html(top_toolbar);
    });
</script>
{% endblock %}

{% block content %}
<div class="content-wrapper">
    <section class="content-header">
        <h1><i class="fa fa-list-ol"></i> 审计日志<small>Audit Logger</small></h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'dashboard:index' %}"><i class="fa fa-dashboard"></i> 仪表盘 <small>[Dashboard]</small> </a></li>
            <li><a href="#"><i class="fa fa-shield"></i>系统安全 <small>[Security]</small></a></li>
            <li class="active"><i class="fa fa-list-ol"></i> 审计日志 <small>[Audit Logger]</small></li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">审计日志</h3>
                    </div>
                    <div class="box-body">
                        <table id="auditlog_table" class="table">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>user</th>
                                    <th>content_type</th>
                                    <th>action</th>
                                    <th>content</th>
                                    <th>created</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}